<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏遮罩案例</title>
</head>
<style>
    .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: gray;
        margin: 30px auto;
    }

    .tudou img {
        width: 100%;
        height: 100%;
    }

    .mask {
        /*隐藏遮罩层*/
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3) url(../images/start.jpg) no-repeat center;
    }

    /*当鼠标经过了盒子模型时，让里面的遮罩层才会显示*/

    .tudou:hover .mask{
        /*这里是显示元素的意思*/
        display: block;
    }

</style>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../images/fox.jpg">
    </div>
</body>
</html>